<template>
  <div class="seed-root mc-table">

    <lark-card border :radius="false" :show-title="false" body-width="100%" body-height="28vh">
      <div class="seed-body">
        <div class="seed-body-header">
          <div class="seed-body-header-operation">
            <div class="seed-body-header-tabs">
              <btn-tabs @change="tabsChange" :items="tabsItems"></btn-tabs>
            </div>
            <div class="seed-body-header-close" @click="closeAction">
              <i class="el-icon-error"></i>
            </div>
          </div>
        </div>

        <div class="seed-body-list">
          <div class="seed-body-table">

            <seed-table :loading="loading" :table-data="tableData" @getData="resetQueryParams"
                        v-if="searchParams.type === 1" :page-num="searchParams.pageNum"
                        :page-size="searchParams.pageSize" :query-type="searchParams.type" :lab-id="labId"
                        @expertDetail="expertDetail" :show-type="showType" :pro-id="proId"></seed-table>

          </div>
          <div class="seed-body-pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="total"
              :current-page.sync="searchParams.pageNum"
              :page-size="searchParams.pageSize"
              @current-change="getDataList"
            >
            </el-pagination>

          </div>
        </div>
      </div>


    </lark-card>

  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed, watch } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import { labList } from '@/api/industry/lab'
  import btnTabs from '@/components/ServiceComponents/btnTabs/index'
  import { resultList } from '@/api/industry/ctl'
  import seedTable from './seedTable'

  export default {
    props: {
      labId: {
        type: [Number, String],
        default: ''
      },
      queryType: {
        type: [Number, String],
        default: null
      },
      pageNum: {
        type: [Number, String],
        default: null
      },
      pageSize: {
        type: [Number, String],
        default: null
      },
      showType: {
        type: [Number, String],
        default: null
      },
      proId: {
        type: [Number, String],
        default: null
      }
    },
    components: {
      btnTabs,
      seedTable
    },
    setup(props, content) {

      let { labId, pageNum, pageSize, queryType } = props

      const data = reactive({
        searchParams: {
          type: queryType != null ? queryType : 1,
          labId: labId != null ? labId : null,
          pageNum: pageNum != null ? pageNum : 1,
          pageSize: pageSize != null ? pageSize : 3
        },
        tabsItems: [
          {
            name: '种子',
            value: 1
          },
          {
            name: '标本', value: 2
          },
          {
            name: '土壤', value: 3
          },
          {
            name: '水分',
            value: 4
          }
        ],
        total: 0,
        loading: false,
        tableData: []
      })

      const resetQueryParams = ({ type, labId, pageNum, pageSize }) => {
        let { searchParams: { type: _type, labId: _labId, pageNum: _pageNum, pageSize: _pageSize } } = data
        data.searchParams = {
          type: type || _type,
          labId: labId || _labId,
          pageNum: pageNum || _pageNum,
          pageSize: pageSize || _pageSize
        }
        getDataList()
      }

      const submit = proId => {
        if (!data?.tableData?.length) return
        content.emit('submit', { proId })
      }

      const closeAction = () => {
        content.emit('closeSelfAction')
      }

      const getDataList = () => {
        let { searchParams } = data
        data.loading = true
        resultList(searchParams).then(res => {
          data.tableData = res.rows
          data.loading = false
          data.total = res.total
        })
      }

      const tabsChange = item => {
        resetQueryParams({ type: item.value, pageNum: 1 })
      }

      const expertDetail = config => {
        content.emit('expertDetail', config)
      }

      watch(() => props.labId, val => {
        if (val == null) return
        resetQueryParams({ labId: val, pageNum: 1 })
      })

      watch(() => data.searchParams, val => {
        content.emit('setPage', val)
      }, { deep: true })

      if (props.labId != null) {
        resetQueryParams({})
      }

      return { ...toRefs(data), closeAction, submit, getDataList, tabsChange, resetQueryParams, expertDetail }
    }
  }
</script>

<style lang="scss">
  $header-height: 22px;
  .seed-root {
    .seed-body {
      padding: 2px 2px 10px 10px;

      .seed-body-header {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        height: $header-height;
        border-bottom: 1px solid green;
        margin-bottom: 2px;


        .seed-body-header-operation {
          display: flex;
          height: 100%;


          .seed-body-header-tabs {
            position: absolute;
            left: 10px;
          }

          .el-button.el-button--success.el-button--mini {
            padding-top: 5px;
            padding-bottom: 5px;
          }
        }

        .seed-body-header-close {
          margin-right: 20px;
          font-size: 20px;
          color: red;

          &:hover {
            cursor: pointer;
          }
        }
      }

      .seed-body-list {
        .seed-body-table {
          height: calc(30vh - 72px);
        }

        .seed-body-pagination {

        }
      }

    }

  }
</style>
